<template>
    <div class="min1500">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >首页</el-breadcrumb-item>
        <el-breadcrumb-item>工作台</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="gongzuo">
        <!-- <el-tabs :tab-position="tabPosition" style="height: 1000px;">  -->
        <!-- <el-tab-pane label="待我审批"> -->
          <el-tabs  style="height: 100px;">
            <el-tab-pane label="待我审批">
              <el-table :data="InApprovaled" style="width: 100%">
                <el-table-column prop="code" label="单据编号"></el-table-column>
                <el-table-column prop="type" label="单据类型"></el-table-column>
                <el-table-column prop="status" label="单据状态"></el-table-column>
                <el-table-column prop="man" label="提交人"></el-table-column>
                <el-table-column prop="time" label="提交时间"></el-table-column>
                <!-- <el-table-column label="操作">
                   <el-button type="success" size="mini" @click="test()">操作</el-button>
                </el-table-column> -->
            </el-table>
            </el-tab-pane>
            <el-tab-pane label="我已审批">
              <el-table :data="OnApprovaled" style="width: 100%">
                <el-table-column prop="code" label="单据编号"></el-table-column>
                <el-table-column prop="type" label="单据类型"></el-table-column>
                <el-table-column prop="status" label="单据状态"></el-table-column>
                <el-table-column prop="man" label="提交人"></el-table-column>
                <el-table-column prop="time" label="提交时间"></el-table-column>
                <!-- <el-table-column label="操作">
                   <el-button type="success" size="mini">操作</el-button>
                </el-table-column> -->
            </el-table>
            </el-tab-pane>
            <el-tab-pane label="审批中">
              <el-table :data="Approvaling" style="width: 100%">
                <el-table-column prop="code" label="单据编号"></el-table-column>
                <el-table-column prop="type" label="单据类型"></el-table-column>
                <el-table-column prop="status" label="单据状态"></el-table-column>
                <el-table-column prop="man" label="提交人"></el-table-column>
                <el-table-column prop="time" label="提交时间"></el-table-column>
                <!-- <el-table-column label="操作">
                   <el-button type="success" size="mini">操作</el-button>
                </el-table-column> -->
            </el-table>
            </el-tab-pane>
            <el-tab-pane label="审批完成">
              <el-table :data="Approvaled" style="width: 100%">
                <el-table-column prop="code" label="单据编号"></el-table-column>
                <el-table-column prop="type" label="单据类型"></el-table-column>
                <el-table-column prop="status" label="单据状态"></el-table-column>
                <el-table-column prop="man" label="提交人"></el-table-column>
                <el-table-column prop="time" label="提交时间"></el-table-column>
                <!-- <el-table-column label="操作">
                   <el-button type="success" size="mini">操作</el-button>
                </el-table-column> -->
            </el-table>
            </el-tab-pane>
            <el-tab-pane label="待出库">
             <el-table :data="Outstock" style="width: 100%">
                <el-table-column prop="code" label="单据编号"></el-table-column>
                <el-table-column prop="type" label="单据类型"></el-table-column>
                <el-table-column prop="status" label="单据状态"></el-table-column>
                <el-table-column prop="man" label="提交人"></el-table-column>
                <el-table-column prop="time" label="提交时间"></el-table-column>
                <!-- <el-table-column label="操作">
                   <el-button type="success" size="mini">操作</el-button>
                </el-table-column> -->
            </el-table>
            </el-tab-pane>
            <el-tab-pane label="待入库">
              <el-table :data="Instock" style="width: 100%">
                <el-table-column prop="code" label="单据编号"></el-table-column>
                <el-table-column prop="type" label="单据类型"></el-table-column>
                <el-table-column prop="status" label="单据状态"></el-table-column>
                <el-table-column prop="man" label="提交人"></el-table-column>
                <el-table-column prop="time" label="提交时间"></el-table-column>
                <!-- <el-table-column label="操作">
                   <el-button type="success" size="mini">操作</el-button>
                </el-table-column> -->
            </el-table>
            </el-tab-pane>

      <!-- </el-tabs> -->
           
        <!-- </el-tab-pane> -->
        <!-- <el-tab-pane label="我已审批">
          <el-table :data="tableData" height="185" style="width: 100%">
                <el-table-column prop="date" label="单据编号"></el-table-column>
                <el-table-column prop="name" label="单据类型"></el-table-column>
                <el-table-column prop="name" label="客户/供应商"></el-table-column>
                <el-table-column prop="name" label="金额"></el-table-column>
                <el-table-column prop="name" label="我的审批时间"></el-table-column>
                <el-table-column prop="name" label="我的审批结果"></el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="审批中">
          <el-table :data="tableData" height="185" style="width: 100%">
                <el-table-column prop="date" label="单据编号"></el-table-column>
                <el-table-column prop="name" label="单据类型"></el-table-column>
                <el-table-column prop="name" label="客户/供应商"></el-table-column>
                <el-table-column prop="name" label="金额"></el-table-column>
                <el-table-column prop="name" label="提交人"></el-table-column>
                <el-table-column prop="name" label="提交时间"></el-table-column>
                <el-table-column prop="name" label="审批状态"></el-table-column>
                <el-table-column prop="name" label="操作"></el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="审批完成">
          <el-table :data="tableData" height="185" style="width: 100%">
                <el-table-column prop="date" label="单据编号"></el-table-column>
                <el-table-column prop="name" label="单据类型"></el-table-column>
                <el-table-column prop="name" label="客户/供应商"></el-table-column>
                <el-table-column prop="name" label="金额"></el-table-column>
                <el-table-column prop="name" label="最后审批人"></el-table-column>
                <el-table-column prop="name" label="审批时间"></el-table-column>
                <el-table-column prop="name" label="审批结果"></el-table-column>
                <el-table-column prop="name" label="操作"></el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="待出库">
          <el-table :data="tableData" height="185" style="width: 100%">
                <el-table-column prop="date" label="单据编号"></el-table-column>
                <el-table-column prop="name" label="客户"></el-table-column>
                <el-table-column prop="name" label="优惠后应收"></el-table-column>
                <el-table-column prop="name" label="销售员"></el-table-column>
                <el-table-column prop="name" label="单据日期"></el-table-column>
                <el-table-column prop="name" label="交货日期"></el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="待入库">
          <el-table :data="tableData" height="185" style="width: 100%">
                <el-table-column prop="date" label="单据编号"></el-table-column>
                <el-table-column prop="name" label="供应商"></el-table-column>
                <el-table-column prop="name" label="优惠后应付"></el-table-column>
                <el-table-column prop="name" label="采购员"></el-table-column>
                <el-table-column prop="name" label="单据日期"></el-table-column>
                <el-table-column prop="name" label="交货日期"></el-table-column>
            </el-table>
        </el-tab-pane> -->
      </el-tabs>
      </el-card>
      <el-card class="chaxun">
        <div class="cy">查询</div>
        <div class="tian">客户查询：
          <el-input placeholder="请输入查询客户" clearable  class="cor" v-model="cc">
            <el-button slot="append" icon="el-icon-search" @click="a"></el-button>
          </el-input>
        </div>
        <div class="tian">供应商查询：
          <el-input placeholder="请输入查询供应商" clearable  class="cor" v-model="dd">
            <el-button slot="append" icon="el-icon-search" @click="b"></el-button>
          </el-input>
        </div>
        <div class="tian">单据查询：
          <el-input placeholder="请输入查询单据" clearable  class="cor" v-model="aa">
            <el-button slot="append" icon="el-icon-search" @click="queryOrder()"></el-button>
          </el-input>
        </div>
        <div class="tian">成品库存查询：
          <el-input placeholder="请输入查询库存" clearable  class="cor" v-model="bb">
            <el-button slot="append" icon="el-icon-search" @click="queryProductStock()"></el-button>
          </el-input>
        </div>
        
      </el-card>
      <el-card class="yujing">
        <div class="cy">库存预警</div>
      </el-card>
     
    </div>
</template>
<script>
export default {
  data () {
    return {
    tabPosition: 'left',
    tableData: [{
          a: 'CG20190404001',
          b: '采购单',
          c: '测试用户',
          d:'张三',
          e:'2019-04-04',
        }],
        aa:'',
        bb:'',
        cc:'',
        dd:'',
        chaManageForm:{},

        InApprovaled:[],//待审批
        OnApprovaled:[],//已审批
        Approvaling:[],//审批中
        Approvaled:[],//审批完成
        Outstock:[],//待出库
        Instock:[],//待入库
    };
  },
  created () {
    this.ManageList()
  },
    methods:{
    test(){
      this.$router.push({path:'/supplier',query:{id:this.dd,name:'张三 '}})
    },
    a(){
      console.log(this.cc);
      
      this.$router.push({path:'/client',query:{id:this.cc}});
    },
    b(){
      this.$router.push({path:'/supplier',query:{id:this.dd}})
    },
    queryOrder(){
      console.log(this.aa)
      let val = this.aa;
      let startWith = ''
      startWith = val.substring(0,2).toUpperCase()

      console.log('-------------------')

      let newString = startWith + val.substring(2)

      console.log(newString )

      if(startWith == 'XS'){//销售
        this.$router.push({path:'/ordermanagement',query:{id:newString}})
      }else if(startWith == 'SC'){//生产
        this.$router.push({path:'/manage',query:{id:newString}})
      }else if(startWith == 'FH'){//发货
        this.$router.push({path:'/ordertobeshipped',query:{id:newString}})
      }else if(startWith == 'CG'){//采购
        this.$router.push({path:'/order',query:{id:newString}})
      }else if(startWith == 'TH'){//退货
        this.$router.push({path:'/cancel',query:{id:newString}})
      }else if(startWith == 'RK'){//入库
        this.$router.push({path:'/queryIAndO',query:{id:newString}})
      }else if(startWith == 'CK'){//出库
        this.$router.push({path:'/queryIAndO',query:{id:newString}})
      }
      //else if(startWith == 'PD'){//盘点
        //this.$router.push({path:'/stocktaking',query:{id:newString}})
      //}
      else if(startWith == 'YS'){//预收
        this.$router.push({path:'/receipt',query:{id:newString}})
      }else if(startWith == 'YF'){//预付
        this.$router.push({path:'/paymentSlip',query:{id:newString}})
      }else if(startWith == 'BX'){//报销
        this.$router.push({path:'/dispatchList',query:{id:newString}})
      }else{
        this.$message({
            type: "info",
            message: "输入单号不符合条件！"
        });
      }

      
    },
    queryProductStock(){
      this.$router.push({path:'/queryStock',query:{id:this.bb}})
    },
    async ManageList() {
      const { data: res } = await this.$http.post("/WorkBench/select",this.chaManageForm);

      this.InApprovaled = res.body.InApprovaled.InApprovaled
      this.OnApprovaled = res.body.OnApprovaled.OnApprovaled
      this.Approvaling = res.body.Approvaling.Approvaling
      this.Approvaled = res.body.Approvaled.Approvaled
      this.Outstock = res.body.Outstock.Outstock
      this.Instock = res.body.Instock.Instock
      
      this.total=res.body.total;
      // this.manageList = res.body.rows;
    },
     dialogClosed(val) {
      this.$refs[val].resetFields();
    },
    }
}
</script>
<style lang='less' scoped>
  .gongzuo{
    width: 70%;
    height: 660px;
    float: left;
    margin-right: 20px;
  }
  .chaxun{
    width: 28%;
    height: 340px;
  }
  .yujing{
    width: 28%;
    height: 300px;
  }
  .cy{
    width: 100%;
    height: 35px;
    border-bottom: 3px solid #eee;
  }
  .tian{
    text-align: right;

  }
  .cor{
    width: 260px;
    margin: 10px 0px;
    margin-left: 10px;
  }
</style>